import { createRouter, createWebHashHistory } from 'vue-router'

// 导入页面
const Layout = () => import('@/views/Layout')
const Home = () => import('@/views/Home')
const TopCategory = () => import('@/views/Category/index')
const SubCategory = () => import('@/views/Category/sub')
const Goods = () => import('@/views/Goods/index')
const Cart = () => import('@/views/Cart/index')

const Login = () => import('@/views/Login/index')
const LoginCallback = () => import('@/views/Login/callback')

const Settlement = () => import('@/views/Member/settlement/index.vue')

const Order = () => import('@/views/Member/order')
const Pay = () => import('@/views/Member/pay/index')
const PayResult = () => import('@/views/Member/pay/result')
const Test = () => import('@/views/Test')
const Model = () => import('@/components/组件双向绑定')
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '/',
        component: Home
      },
      // 一级分类详情页面
      {
        path: '/category/:id',
        component: TopCategory
      },
      // 二级分类
      {
        path: '/category/sub/:id',
        component: SubCategory
      },
      // 商品详情
      {
        path: '/goods/:id',
        component: Goods
      },
      // 购物车
      {
        path: '/cart',
        component: Cart
      },
      // 结算
      {
        path: '/settlement',
        component: Settlement
      },
      // 支付
      { path: '/pay', component: Pay },
      { path: '/pay/callback', component: PayResult },
      // 订单
      { path: '/order', component: Order }

    ]
  },
  // 登录
  {
    path: '/login',
    component: Login
  },
  {
    path: '/login/callback',
    component: LoginCallback
  },
  // 测试
  {
    path: '/test',
    component: Test
  },
  {
    path: '/model',
    component: Model
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  // 每次切换路由的时候滚动到页面顶部
  scrollBehavior () {
    // vue2.0  x  y  控制
    // vue3.0  left  top 控制
    return { left: 0, top: 0 }
  }
})

export default router
